<template>
	<view :style="{'--color':vuex_config.themeColor1}" v-if="tabAct > -1">
		<view class="tab-box" v-if="canAdd">
			<view class="tab-list">
				<view v-for="(item, index) in tabList" :key="index" class="tab-item" @click="changeTab(index)">
					{{ item.name }}
				</view>
				<view class="tab-line" :style="tabLineLeft"></view>
			</view>
		</view>
		<form-add v-if="tabAct === 0" :infoId="id" @subFinsh="subFinsh"></form-add>
		<view v-show="tabAct === 1">
			<form-list v-if="id > 0" ref="list_view" :infoId="id"></form-list>
		</view>
	</view>
</template>

<script>
	import formAdd from './pageComponents/formAdd.vue'
	import formList from './pageComponents/formList.vue'
	export default {
		data() {
			return {
				tabAct: -1,
				tabList: [{
						name: '报名',
						type: 1
					},
					{
						name: '历史记录',
						type: 2
					}
				],
				id: null,
				canAdd: false,
				pageInit: false
			}
		},
		computed: {
			tabLineLeft() {
				let str = `left: ${24 + this.tabAct * 51}%;`
				return str;
			},
		},
		components: {
			'form-add': formAdd,
			'form-list': formList,
		},
		onLoad(options) {
			if (options && options.id) {
				this.canAdd = Number(options.canAdd)
				if (options.canAdd) {
					this.tabAct = 0
					this.canAdd = true
				} else {
					this.tabAct = 1
				}
				this.id = Number(options.id)
			}
		},
		onShow() {
			if (!this.pageInit) {
				this.pageInit = true
			} else {
				this.$refs.list_view.init()
			}
		},
		onReachBottom() {
			if (this.tabAct == 1) {
				this.$refs.list_view.onReachBottom()
			}
		},
		methods: {
			changeTab(index) {
				this.tabAct = index
			},
			subFinsh() {
				this.tabAct = 1
				this.$nextTick(() => {
					this.$refs.list_view.init()
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $www-theme-bg;
	}
</style>
<style lang="scss" scoped>
	.tab-box {
		width: 100%;
		position: relative;
		height: 60rpx;

		.tab-list {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;
			display: flex;

			.tab-item {
				height: 60rpx;
				line-height: 60rpx;
				flex: 1;
				overflow: hidden;
				text-align: center;
				font-size: 26rpx;
			}

			.tab-line {
				width: 90rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: var(--color);
				position: absolute;
				bottom: 0;
				left: 10%;
				transform: translate(-50%, 0);
				transition: all 0.3s;
			}
		}

	}
</style>
